import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Spacer from '../../components/Spacer';
import HomeCard from './components/HomeCard';
import DailyCard from './components/DailyCard';
import { OverviewData } from './types';
import useBasisCash from '../../hooks/useBasisCash';
import config from '../../config';
import Notice from '../../components/Notice';
import TokenSymbol from '../../components/TokenSymbol';

import bg_index from '../../assets/image/banner_bigbang.png';
import bg_index_h5 from '../../assets/image/h5banner_bigbang.png';
import LaunchCountdown from '../../components/LaunchCountdown';
import useLiquidityOracleTVLine from '../../hooks/useLiquidityOracleTVLine';
import useBalanceOf from "../../hooks/useBalanceOf";
import moment from "moment";
import { commify } from 'ethers/lib/utils';

const Home: React.FC = () => {
  const basisCash = useBasisCash();

  const [{ cash, sfund, share, sHT, sNEO, sFILDA, sNULS, sCAN, sFLM, sMDX }, setStats] = useState<OverviewData>({});
  const [dataAll,setDataAll] = React.useState(false);
  const [data,setData] = React.useState(null);
  const fetchStats = useCallback(async () => { 
    const [cash, sfund,share, sHT, sNEO, sFILDA, sNULS, sCAN, sFLM, sMDX] = await Promise.all([
      basisCash.getCashStatFromUniswap(),
      basisCash.getsFundUsdtFunc(),
      basisCash.getShareStat(),
      basisCash.getCashStatFromUniswapSHT(),
      basisCash.getSNEOStatFromUniswap(),
      basisCash.getLiquidityOracle('filda'),
      basisCash.getLiquidityOracle('nuls'),
      basisCash.getLiquidityOracle('can'),
      basisCash.getLiquidityOracle('flm'),
      basisCash.getLiquidityOracle('mdx'),
    ]);
    console.log('sfund',sfund)
    setStats({ cash, sfund, share, sHT, sNEO, sFILDA, sNULS, sCAN, sFLM, sMDX });
  }, [basisCash, setStats]);
  const today = moment(new Date()).format("YYYY-MM-DD");
  const days = Math.ceil((new Date().getTime() - new Date('2021-02-24T00:00:00Z').getTime()) / (24 * 3600 * 1000));

  useEffect(() => {
    if (basisCash) {
      fetchStats().catch((err) => console.error(err.stack));
    }
  }, [basisCash]);
  useEffect(() => {
    if (basisCash) {
      /*
      basisCash.post('111').then((res) => {
        console.log('gettotaltvl', res);
      });
      */
      basisCash.getData().then((res) => {
        //setData({totaltvl: 10000, tvl: {cash: 111, ht: 111, neo: 111, filda: 111, nuls: 111, can: 111, flm: 1111111, mdx: 10000000}});
        setData(res);
        console.log('gettotaltvl', res);
      });
      
      if (process.env.NODE_ENV == "development") {
        const func = () => {
          basisCash.getTotalTVL().then((res) => {
            console.log('totaltvl', res + ' ' + new Date().toString());
          });
        };
        func();
        setInterval(() => {
          func();
        }, 1800*1000);
      }
    }
  }, [basisCash]);
  

  return (
    <Page>
      <StylehCont>
      <StyleDiv1>
        <img
          src={bg_index}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={bg_index_h5}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
      
      <DivTopCont>
        {!dataAll?
        <DivTop1>
        <DivTopTit>
          <DivTopTitFont>总锁仓量 <DivTopTitFont1> $ {data ? commify(Number(data.totaltvl).toFixed(2)) : '-'}</DivTopTitFont1> </DivTopTitFont>
          <DivTopTitBtn onClick={()=>{
            setDataAll(true)
          }}>日报 ∨</DivTopTitBtn>
        </DivTopTit>
      </DivTop1>
      :
      <DivTop1>
        <DivTopTit>
          <DivTopTitFont>总锁仓量 <DivTopTitFont1> $ {data ? commify(Number(data.totaltvl).toFixed(2)) : '-'}</DivTopTitFont1> </DivTopTitFont>
          <DivTopTitBtn onClick={()=>{
            setDataAll(false)
          }}>日报 ∨</DivTopTitBtn>
        </DivTopTit>
        <DivTime>
          <DivTime1>日期: <DivTime2>{today}</DivTime2></DivTime1>
          <DivTime1>已上线: <DivTime2>{days} 天</DivTime2></DivTime1>
          {/*
          <DivTime1>持币地址数: <DivTime2>39,999</DivTime2></DivTime1>
          <DivTime1>交易额: <DivTime2>$19,000,624</DivTime2></DivTime1>
          */}
        </DivTime> 
        {Object.entries(data.tvl).map(([group, tvl], i) => (
            <React.Fragment key={group}>
              <DailyCard group={group} tvl={Number(tvl)} />
            </React.Fragment>
          ))}
      </DivTop1>
      }      
      </DivTopCont>
    

      <CardWrapper>
        <HomeCard
          title="sCASH"
          symbol="sCASH"
          color="#2FEA99"
          supplyLabel="当前流通量"
          stat={cash}
          group="cash"
        />
        <Spacer size="lg" />
        <HomeCard
          title="SHARE"
          symbol="SHARE"
          color="#FA4E32"
          stat={share}
          supplyLabel="当前流通量"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sFUND"
          symbol="FUND"
          color="#318DFF"
          stat={sfund}
        />
      </CardWrapper>

      <CardWrapper1>
        <HomeCard
          title="sHT"
          symbol="sHT"
          color="#2FEA99"
          baseNum={cash ? Number(cash.totalSupply) : 0}
          supplyLabel="当前流通量"
          stat={sHT}
          group="ht"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sNEO"
          symbol="sNEO"
          color="#2FEA99"
          baseNum={cash ? Number(cash.totalSupply) : 0}
          supplyLabel="当前流通量"
          stat={sNEO}
          group="neo"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sETH"
          symbol="sETH"
          color="#318DFF"
          baseNum={cash ? Number(cash.totalSupply) : 0}
          stat={sfund}
          group="eth"
        />
      </CardWrapper1>


      <CardWrapper1>
        <HomeCard
          title="sBTC"
          symbol="sBTC"
          color="#2FEA99"
          baseNum={cash ? Number(cash.totalSupply) : 0}
          supplyLabel="当前流通量"
          stat={cash}
          group="btc"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sMDX"
          symbol="sMDX"
          color="#FA4E32"
          baseNum={sMDX ? Number(sMDX.tvl) : 0}
          stat={sMDX}
          group="mdx"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sDOT"
          symbol="sDOT"
          color="#FA4E32"
          baseNum={0}
          stat={share}
          group="dot"
        />
      </CardWrapper1>

      <CardWrapper1>
        <HomeCard
          title="sFIL"
          symbol="sFIL"
          color="#318DFF"
          baseNum={0}
          stat={sfund}
          group="fil"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sFILDA"
          symbol="sFILDA"
          color="#2FEA99"
          baseNum={sFILDA ? Number(sFILDA.tvl): 0}
          supplyLabel="当前流通量"
          stat={sFILDA}
          group="filda"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sNULS"
          symbol="sNULS"
          color="#2FEA99"
          baseNum={sNULS ? Number(sNULS.tvl) : 0}
          stat={sNULS}
          group="nuls"
        />
      </CardWrapper1>
      <CardWrapper1>
        <HomeCard
          title="sCAN"
          symbol="sCAN"
          color="#318DFF"
          baseNum={sCAN ? Number(sCAN.tvl) : 0}
          stat={sfund}
          group="can"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sFLM"
          symbol="sFLM"
          color="#FA4E32"
          baseNum={sFLM ? Number(sFLM.tvl) : 0}
          stat={share}
          group="flm"
        />
      </CardWrapper1>
      </StylehCont>
    </Page>
  );
};

const DivTopCont = styled.div`
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
`

const Divtips = styled.div`
  position: absolute;
  top: 20px;
  left: 0;
  width: 124px;
  text-align: center;
  background: #2FEA99;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  font-style: italic;
  color: #03112B;
  line-height: 30px;
  @media (max-width: 768px) {
    position: initial;
    padding-bottom: 10px;
  }
`

const DivVlockck = styled.div`
  width: 120px;
  text-align: center;
  background: #FFFFFF;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  line-height: 34px;
  margin-right: 15px;
`

const DivRow = styled.div`
display: flex;
flex-direction: row;
align-items: center;
@media (max-width: 768px) {
  flex-direction: column;
  align-items: start;
}
`

const Divcaori = styled.div`
  padding-left: 180px;
  padding-right: 120px;
  @media (max-width: 768px) {
    padding-left: 10px;
    padding-right: 0;
  }
`

const Divcaoxia = styled.div`
padding-left: 48px;
padding-right: 120px;
@media (max-width: 768px) {
  padding-left: 10px;
  padding-right: 0;
}
`

const DivcaoHong = styled.div`
position: relative;
padding: 20px 0;
width: 900px;
border: 1px solid #175B3D;
@media (max-width: 768px) {
  width: 100%;
}
`

const DivFlexspan = styled.span`
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
  @media (max-width: 768px) {
    font-size: 12px;
  }
`

const DivFlexspanTit = styled.span`
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2FEA99;
  line-height: 27px;
`

const DivFlexspanTit1 = styled.span`
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2FEA99;
  line-height: 27px;
`

const DivFlexspan1 = styled.span`
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #2FEA99;
`

const DivFlex = styled.div`
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
    align-items: center;
`

const DivFlex1 = styled.div`
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
    align-items: center;
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: start;
    }
`

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  // margin-top: -70px;
  @media (max-width: 768px) {
    display: none;
  }
`

const DivTopTit = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
`

const DivTopTitFont = styled.div`
display: flex;
  flex-direction: row;
  font-size: 18px;
  font-family: FZPinShangHeiS-R-GB;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 48px;
  @media (max-width: 768px) {
    font-size: 12px;
  }
`

const DivTopTitBtn = styled.div`
  margin-left: 40px;
  width: 160px;
  height: 40px;
  background: #2FEA99;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-family: FZPinShangHeiS-R-GB;
  font-weight: 400;
  color: #100428;
  cursor: pointer;
  @media (max-width: 768px) {
    width: 120px;
    font-size: 12px;
    margin-left: 10px;
  }
`

const DivTime = styled.div`
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-around;
align-items: center;
`

const DivTime1 = styled.div`
display: flex;
flex-direction: row;
  font-size: 16px;
  font-family: PingFang SC;
  padding: 0 6px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 66px;
  @media (max-width: 768px) {
    display: block;
    line-height: 30px;
    font-size: 14px;
  }
`

const DivTime2 = styled.div`
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 66px;
  @media (max-width: 768px) {
    line-height: 30px;
    font-size: 14px;
  }
`

const DivTopTitFont1 = styled.div`
    font-size: 32px;
    font-family: FZChaoCuHei-M10S;
    font-weight: 400;
    color: #2FEA99;
    line-height: 48px;
    margin-left: 15px;
    @media (max-width: 768px) {
      font-size: 16px;
      margin-left: 8px;
    }
`

const DivTop1 = styled.div`
  width: 980px;
  height: ${'auto'};
  background: #100428;
  border: 1px solid #2FEA99;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 20px;
  overflow: hidden;
  @media (max-width: 768px) {
    width: 100%;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const StylehCont = styled.div`
  background: "#100428"
`;

const Stylesubtitle = styled.p`
color: #FFFFFF;
font-size: 18px;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
`

const StyledOverview = styled.div`
  align-items: center;
  display: flex;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const CardWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const CardWrapper1 = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const StyledNoticeContainer = styled.div`
  max-width: 768px;
  width: 90vw;
`;

const StyledSpacer = styled.div`
  height: ${(props) => props.theme.spacing[4]}px;
  width: ${(props) => props.theme.spacing[4]}px;
`;

const StyledLink = styled.a`
  font-weight: 700;
  text-decoration: none;
  color: ${(props) => props.theme.color.primary.main};
`;

export default Home;
